<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=["/js/service/spot.js","/js/service/channel.js","/webjars/1.0.0/js/components.js","/js/components.js",
"/js/app/channel.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/index.css","/css/iconfont.css"] in base/>
<@base.page "">

    <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24">
                    <div :style="treeStyle">
                        <tree-spot-device @node_click="getTreeSelectedVal" v-bind:is-load-device="true" v-model="treeData" @collapse="collapse"></tree-spot-device>
                    </div>
                    <div :style="tableStyle">
                        <el-col :span="24" class="toolbar">
                            <el-row>
                                <el-button type="primary" plain size="small" icon="icon-third-mini-piliang" @click="batchEdit()">批量修改参数</el-button>
                                <el-button type="success" plain size="small" icon="el-icon-refresh-left" @click="reduction()">还原通道名</el-button>
                                <el-button type="danger" plain size="small" icon="el-icon-delete" @click="clearChannel()">清空列表</el-button>
                                <el-button type="warning" plain size="small" icon="icon-third-mini-reset" @click="initPull()">初始化</el-button>
                                <!--<el-button type="success" plain size="small" icon="el-icon-plus" @click="addVirtual()">添加虚拟通道</el-button>-->
                            </el-row>
                            <el-form :inline="true" :model="searchVm">
                                <el-form-item label="">
                                    <el-input style="width:150px;" v-model="searchVm.channelCode" clearable placeholder="CH通道号"></el-input>
                                    <el-input style="width:150px;" v-model="searchVm.name" clearable placeholder="通道名称"></el-input>
                                    <el-select v-model="searchVm.dataType" clearable placeholder="类型">
                                        <el-option v-for="item in switchDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                    <el-select v-model="searchVm.historyData" clearable placeholder="历史数据上报">
                                        <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                    <el-select v-model="searchVm.alarmData" clearable placeholder="告警数据上报">
                                        <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <@but.search "search()" ":loading='tableVm.loading'"/>
                                <el-form>
                        </el-col>
                        <!--表格-->
                        <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%"
                                  v-loading="tableVm.loading" @selection-change="selectChannel"
                                  :row-class-name="rowClass" height="550px">
                            <template slot="empty">
                                <span v-if="treeData.id !=undefined && treeData.isDevice ">暂无数据</span>
                                <span v-else style="color: #ff0000;">选择设备后再查询</span>
                            </template>
                            <el-table-column type="selection" width="55" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="channelCode" label="CH"  min-width="45" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="name" label="通道名称"  min-width="100" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="历史数据上报"  min-width="55" show-overflow-tooltip align="center">
                                <template scope="scope">
                                    {{scope.row.historyData | formatUp}}
                                </template>
                            </el-table-column>
                            <el-table-column label="告警数据上报"  min-width="55" show-overflow-tooltip align="center">
                                <template scope="scope">
                                    {{scope.row.alarmData | formatUp}}
                                </template>
                            </el-table-column>
                            <el-table-column label="类型"  min-width="55" show-overflow-tooltip align="center">
                                <template scope="scope">
                                    {{scope.row.dataType | formatSwitch}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="yuansu" label="元素"  min-width="60" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="xishu" label="系数"  min-width="80" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="unit" label="单位"  min-width="55" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="模拟阈值" align="center">
                                <el-table-column prop="min" label="MIN"  align="center" :formatter="formatterMin"> </el-table-column>
                                <el-table-column prop="max" label="MAX"  align="center" :formatter="formatterMax"> </el-table-column>
                            </el-table-column>
                            <el-table-column prop="norvalue" label="开关量常态"  min-width="55" show-overflow-tooltip align="center" :formatter="formatterSwitch"></el-table-column>
                            <el-table-column label="操作" min-width="300">
                                <template scope="scope">
                                    <el-button type="warning" size="mini"  @click="edit(scope.$index,scope.row)" icon="el-icon-edit" >编辑</el-button>
                                    <!-- <el-button type="primary" size="mini" @click="exchange(scope.$index,scope.row)" icon="el-icon-sort" v-if="scope.row.virtualId === '' ">置换通道</el-button>-->
                                    <el-button type="success" size="mini" @click="translate(scope.$index,scope.row)" icon="icon-third-mini-fanyi1" >转译</el-button>
                                    <!--<el-button type="danger" size="mini" @click="deleteRow(scope.$index,scope.row)" icon="el-icon-third-fanyi" v-if="scope.row.virtualId != ''">删除虚拟通道</el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="tableVm.pageIndex"
                                    :page-size="tableVm.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="tableVm.total"
                                    :page-sizes="[10, 50, 100, 500,1000]">
                            </el-pagination>
                        </div>
                        <!--编辑界面-->
                        <el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
                            <el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm">
                                <el-row>
                                    <el-form-item label="通道名称" prop="name">
                                        <el-input v-model="editVm.data.name" :disabled="!editVm.isEdit || editVm.data.virtualId !='' " maxlength="50"></el-input>
                                    </el-form-item>
                                    <el-form-item label="类型" prop="dataType">
                                        <el-select v-model="editVm.data.dataType" :disabled="!editVm.isEdit || editVm.data.virtualId !=''" style="width:100%;" filterable>
                                            <el-option v-for="item in switchDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="系数" prop="xishu">
                                        <el-input v-model="editVm.data.xishu" :disabled="!editVm.isEdit" maxlength="8"></el-input>
                                    </el-form-item>
                                    <el-form-item label="元素" >
                                        <el-input v-model="editVm.data.yuansu" :disabled="!editVm.isEdit || editVm.data.virtualId !=''" maxlength="20"></el-input>
                                    </el-form-item>
                                    <el-form-item label="单位" >
                                        <el-input v-model="editVm.data.unit" :disabled="!editVm.isEdit " maxlength="10"></el-input>
                                    </el-form-item>
                                    <el-form-item label="加入历史数据包" prop="historyData" >
                                        <el-select v-model="editVm.data.historyData" :disabled="!editVm.isEdit" style="width:100%;" filterable>
                                            <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="告警数据上报" prop="alarmData" >
                                        <el-select v-model="editVm.data.alarmData" :disabled="!editVm.isEdit" style="width:100%;" filterable>
                                            <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="模拟阈值" v-if="editVm.data.dataType == 0">
                                            <el-input v-model="editVm.data.min" :disabled="!editVm.isEdit" style="width:40%;" maxlength="11"></el-input>
                                            <span style="color:#606266;">MIN — </span>
                                            <el-input v-model="editVm.data.max" :disabled="!editVm.isEdit" style="width:40%;" maxlength="11"></el-input>
                                            <span style="color:#606266;">MAX</span>
                                    </el-form-item>
                                    <el-form-item label="开关量常态" v-if="editVm.data.dataType == 1">
                                        <el-input v-model="editVm.data.norvalue" :disabled="!editVm.isEdit" placeholder="输入开关量的正常状态，多种正常状态使用 | 隔开" maxlength="20"></el-input>
                                    </el-form-item>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <@but.back "editVm.visible = false" />
                                <@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
                            </div>
                        </el-dialog>

                        <!--批量改参数-->
                        <el-dialog :title="batchEditVm.oprate" :visible.sync="batchEditVm.visible" width="900px">
                            <el-form :model="batchEditVm.data" label-width="130px" ref="batchEditForm" label-position="left" style="margin-left:30px;"
                                     :rules="batchEditVm.rules" hide-required-asterisk>
                                <el-row>
                                    <el-form-item prop="xishu" class="is-no-asterisk" ref="xishu">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkXishu" @change="change('xishu',batchEditVm.chk.chkXishu)">系数</el-checkbox>
                                        </div>
                                        <el-input v-model="batchEditVm.data.xishu" maxlength="8"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="unit" class="is-no-asterisk" ref="unit">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkUnit" @change="change('unit',batchEditVm.chk.chkUnit)">单位</el-checkbox>
                                        </div>
                                        <el-input v-model="batchEditVm.data.unit"  maxlength="5"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="yuansu" class="is-no-asterisk" ref="yuansu">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkYuansu" @change="change('yuansu',batchEditVm.chk.chkYuansu)">元素</el-checkbox>
                                        </div>
                                        <el-input v-model="batchEditVm.data.yuansu" maxlength="20"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="historyData" class="is-no-asterisk" ref="historyData">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkHistoryData" @change="change('historyData',batchEditVm.chk.chkHistoryData)">加入历史数据包</el-checkbox>
                                        </div>
                                        <el-select v-model="batchEditVm.data.historyData" style="width:100%;" filterable>
                                            <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="alarmData" class="is-no-asterisk" ref="alarmData">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkAlarmData" @change="change('alarmData',batchEditVm.chk.chkAlarmData)">告警数据上报</el-checkbox>
                                        </div>
                                        <el-select v-model="batchEditVm.data.alarmData" style="width:100%;" filterable>
                                            <el-option v-for="item in upDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="min" class="is-no-asterisk" ref="min">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkMinMax" @change="change('min,max',batchEditVm.chk.chkMinMax)">模拟阈值</el-checkbox>
                                        </div>
                                        <el-input v-model="batchEditVm.data.min" style="width:30%;" maxlength="11"></el-input>
                                        <span style="color:#606266;">MIN — </span>
                                        <el-form-item prop="max" class="is-no-asterisk" style="display: inline-block" ref="max">
                                            <el-input v-model="batchEditVm.data.max" style="width:100%;" maxlength="11"></el-input>
                                        </el-form-item>
                                        <span style="color:#606266;">MAX</span>
                                    </el-form-item>
                                    <el-form-item prop="norvalue" class="is-no-asterisk" ref="norvalue">
                                        <div slot="label">
                                            <el-checkbox v-model="batchEditVm.chk.chkSwitch" @change="change('norvalue',batchEditVm.chk.chkSwitch)">开关量常态</el-checkbox>
                                        </div>
                                        <el-input v-model="batchEditVm.data.norvalue" placeholder="输入开关量的正常状态，多种正常状态使用 | 隔开" maxlength="20"></el-input>
                                    </el-form-item>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <@but.back "batchEditVm.visible = false" />
                                <@but.save "saveBatchEdit(batchEditVm)" ':loading="batchEditVm.loading"'/>
                            </div>
                        </el-dialog>

                        <!--置换通道-->
                        <el-dialog :title="exchangeEditVm.oprate" :visible.sync="exchangeEditVm.visible" width="900px">
                            <!-- element-ui的el-form的中如果只有一个input框，当按下enter键时，会默认出发提交事件，刷新页面 -->
                            <el-form :model="exchangeEditVm.data" label-width="150px" ref="exchangeEditForm" :rules="exchangeEditVm.rules" @submit.native.prevent>
                                <el-row>
                                    <el-form-item label="数据通道号" prop="newChannelCode">
                                        <el-input v-model="exchangeEditVm.data.newChannelCode" style="width:40%;" maxlength="5"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <span style="color:#ff0000;">
                                            注意：若置换通道已存在，则两个通道互换；若置换通道号不存在则更新为新通道
                                        </span>
                                    </el-form-item>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <@but.back "exchangeEditVm.visible = false" />
                                <@but.save "saveExchane(exchangeEditVm)" ':loading="exchangeEditVm.loading"'/>
                            </div>
                        </el-dialog>

                        <!--数值转译-->
                        <el-dialog :visible.sync="translateEditVm.visible" width="900px">
                            <div slot="title">
                                <div style="float: left;width: 100px;" class="el-dialog__title">{{translateEditVm.oprate}}</div>
                                <div style="padding-top: 8px;color: #909399;">通道：{{translateEditVm.channelCode}}_{{translateEditVm.channelName}}</div>
                            </div>
                            <el-col :span="24" class="toolbar">
                                <el-row>
                                    <el-button type="success" plain size="small" icon="el-icon-plus" @click="addTranslate()">添加</el-button>
                                </el-row>
                            </el-col>
                            <el-form  :rules="translateEditVm.rules" :model="translateEditVm.form">
                                <el-table ref="multipleTable" stripe :data="translateEditVm.form.data" border style="width: 100%" >
                                    <el-table-column label="采集数值"  min-width="100" show-overflow-tooltip :render-header="renderTranslateHeader">
                                        <template slot-scope="scope">
                                            <el-form-item required  :prop="'data.' + scope.$index + '.key'" class="is-no-asterisk"
                                                          :rules='translateEditVm.rules.key' v-if="scope.row.isEdit" style="margin-bottom: 0px;">
                                                <el-input v-model="scope.row.key" ></el-input>
                                            </el-form-item>
                                            <span v-if="!scope.row.isEdit">{{scope.row.key}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="转译数值"  min-width="100" show-overflow-tooltip :render-header="renderTranslateHeader">
                                        <template slot-scope="scope">
                                            <el-form-item required  :prop="'data.' + scope.$index + '.value'" class="is-no-asterisk"
                                                          :rules='translateEditVm.rules.value' v-if="scope.row.isEdit" style="margin-bottom: 0px;">
                                                <el-input v-model="scope.row.value"></el-input>
                                            </el-form-item>
                                            <span v-if="!scope.row.isEdit">{{scope.row.value}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" min-width="300">
                                        <template scope="scope">
                                            <@tabt.save "saveTranslate(scope.$index,scope.row)" 'v-if="scope.row.isEdit"' />
                                            <@tabt.edit "editTranslate(scope.$index,scope.row)" 'v-if="!scope.row.isEdit"'/>
                                            <@tabt.delete "deleteTranslate(scope.$index,scope.row)" 'v-if="!scope.row.isEdit"'/>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form>
                        </el-dialog>

                        <!--添加虚拟通道
                        <el-dialog :title="virtualEditVm.oprate" :visible.sync="virtualEditVm.visible" width="900px">
                            <el-form :model="virtualEditVm.data" label-width="150px" :rules="virtualEditVm.rules" ref="virtualForm">
                                <el-row>
                                    <el-form-item label="通道号" prop="channelCode">
                                        <el-input v-model="virtualEditVm.data.channelCode" maxlength="50"></el-input>
                                    </el-form-item>
                                    <el-form-item label="类型" prop="dataType">
                                        <el-select v-model="virtualEditVm.data.dataType" style="width:100%;" filterable>
                                            <el-option v-for="item in switchDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="虚拟通道" prop="virtualId">
                                        <el-select v-model="virtualEditVm.data.virtualId" style="width:100%;" filterable>
                                            <el-option v-for="item in virtualList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <@but.back "virtualEditVm.visible = false" />
                                <@but.save "saveVirtual(virtualEditVm)"/>
                            </div>
                        </el-dialog>
                        -->

                    </div>
                </el-col>
            </section>
        </el-col>
    </div>

</@base.page>
